<template>
	<!-- 帮助中心 -->
	<view id="app-wrapper">
		<view class="wrap-header">
			<view class="header-search">
				<img src="http://cdn.yupao.com/newyupao/images/gl/newtopjob-search-icon.png" mode="widthFix" alt="">
				<u-input placeholder="请输入你想找的问题" v-model="value" type="text" />
			</view>
			<view class="header-box"></view>
		</view>
		<view class="wrap-main">
			<view class="main-title">问题类型</view>
			<div class="main-box">
				<!-- 项 -->
				<view class="box-item">
					<view v-for="(item,index) in issueList" :key="item.name">
						<!-- 父标题 -->
						<view  @click="handleShowItem(index)" class="item-name">
							<view class="name-left">
								<img :src="item.iconSrc" alt="" mode='widthFix' />
								<text>{{item.name}}</text>
							</view>
							<view class="name-right">
								<img :class="{'img-rotate':item.show}" mode="widthFix" src="http://cdn.yupao.com/newyupao/images/new-center-rightarrow.png" alt="">
							</view>
						</view>
						<!-- 子内容 -->
						<view v-if="item.show" class="name-desc">
							<view v-for="(item2,index2) in item.descList" :key="index2">
								<view class="desc-item">{{item2.name}}</view>
							</view>
						</view>
					</view>
					
				</view>
			</div>
		</view>
		<view class="wrap-footer">
			<view @click="openFeedback('./feedback')" class="footer-submit">意见反馈</view>
			<view @click="openFeedback('./feedbackMy')" class="footer-my">我的反馈</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:'',
				issueList:[
					{
						name:'招工问题',
						show:false,
						iconSrc:'http://cdn.yupao.com/resources/images/20201008/1602155080190989.png',
						descList:[
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
						]
					},
					{
						name:'找活问题',
						show:false,
						iconSrc:'http://cdn.yupao.com/resources/images/20201008/1602155113101866.png',
						descList:[
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
						]
					},{
						name:'积分问题',
						show:false,
						iconSrc:'http://cdn.yupao.com/resources/images/20201008/1602155162148468.png',
						descList:[
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
						]
					},{
						name:'信息审核',
						show:false,
						iconSrc:'http://cdn.yupao.com/resources/images/20201008/1602155193473371.png',
						descList:[
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
						]
					},{
						name:'举报投诉',
						show:false,
						iconSrc:'http://cdn.yupao.com/resources/images/20201008/1602155221887643.png',
						descList:[
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
						]
					},{
						name:'账号管理',
						show:false,
						iconSrc:'http://cdn.yupao.com/resources/images/20201008/1602155304182423.png',
						descList:[
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
							{name:'大家伙大家打的旧爱记得'},
						]
					}
				],
			};
		},
		methods:{
			// 展开收起目录
			handleShowItem(index){
				 this.issueList[index].show = !this.issueList[index].show
			},
			// 打开意见反馈
			openFeedback(url){
				console.log(url,"??????")
				uni.navigateTo({
					url:url
				})	
			},
		}
	}
</script>

<style scoped lang="scss">
#app-wrapper{
	padding: 20rpx;
	.wrap-header{
		position: relative;
		.header-search{
			display:flex;
			padding: 10rpx;
			align-items: center;
			box-shadow: 0rpx 0rpx 10rpx #ccc;
			
			border-radius: 5rpx;
			img{
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}
		.header-box{
			position: absolute;
		}
	}
	.wrap-main{
		padding-bottom: 180rpx;
		.main-title{
			padding: 20rpx 0;
			font-size: 32rpx;
			font-weight: 600;
		}
		.main-box{
			.box-item{
				.item-name{
					display: flex;
					align-items: center;
					padding: 20rpx 0;
					border-bottom: 2rpx solid #f5f5f5;
					.name-left{
						display: flex;
						align-items: center;
						font-size: 32rpx;
						img{
							width: 50rpx;
							height: 50rpx;
							margin-right: 20rpx;
						}
					}
					.name-right{
						margin-left: auto;
						img{
							height: 30rpx;
							transition: 0.2s;
							transform: rotate(90deg);
						}
						.img-rotate{
							transform: rotate(-90deg)
						}
					}
				}
				.name-desc{
					padding-bottom: 20rpx;
					.desc-item{
						padding: 20rpx 0;
						font-size: 30rpx;
						color: #777777;
					}
				}
			}
		}
	}
	.wrap-footer{
		position: fixed;
		width: 100%;
		height: 180rpx;
		bottom: 0;
		left: 0;
		color:#fff;
		padding-top: 30rpx;
		background-color: #fff;
		.footer-submit{
			width: 80%;
			height: 70rpx;
			line-height: 70rpx;
			margin: 0 auto;
			color:#fff;
			background-color: #0099ff;
			text-align: center;
			border-radius: 10rpx;
			font-weight: 600;
		}
		.footer-my{
			padding-top: 20rpx;
			color:#0099ff;
			text-align: center;
		}
	}
}
</style>
